import { ajax, tools } from '../../js/ajax.js';

//#region  添加的部分
let txt_title = document.getElementById('txt_title');
let txt_info = document.getElementById('txt_info');
let btnAdd = document.getElementById('btnAdd');

btnAdd.addEventListener('click', () => {
  ajax.post(
    '/user/note/add',
    {
      title: txt_title.value,
      info: txt_info.value,
    },
    (data) => {
      console.log(data);
      showToast(data.message);
    }
  );
});

//#endregion

//#region 弹出层提升框

let liveToast = document.getElementById('liveToast');
const toast = new bootstrap.Toast(liveToast);
//#liveToast . toast-body
//querySelector是通过css选择器获取页面上的元素（只会返回一个）
const toastBody = document.querySelector('#liveToast .toast-body');
console.log('toastBady===>', toastBody);
function showToast(message) {
  toastBody.innerHTML = message;
  toast.show();
}
//#endregion

//#region 查询的部分

//分页的参数
let page = {
  pageNumber: 1,
  pageSize: 5,
};

//查询过滤条件
let queryInfo = {
  title: '',
  info: '',
};

//记事本列表
let list = [];

let tbdata = document.getElementById('tbdata');

let btnQuery = document.getElementById('btnQuery');

let txt_qtitle = document.getElementById('txt_qtitle');

let txt_qinfo = document.getElementById('txt_qinfo');

btnQuery.addEventListener('click', () => {
  page.pageNumber = 1;
  queryInfo.title = txt_qtitle.value;
  queryInfo.info = txt_qinfo.value;
  query();
});

function query() {
  ajax.post('/user/note/queryAll', tools.mergeJson(page, queryInfo), (data) => {
    if (data.success) {
      list = data.list;
      page = data.page;
      showData();
      showPage();
    } else {
      showToast(data.message);
    }
  });
}

function showData() {
  tbdata.innerHTML = '';

  for (let i = 0; i < list.length; i++) {
    let info = list[i];
    let tr = document.createElement('tr');
    let td;
    //标题
    td = document.createElement('td');
    td.append(info.title);
    tr.append(td);

    //内容
    td = document.createElement('td');
    td.append(info.info);
    tr.append(td);

    //信息最后修改时间
    td = document.createElement('td');
    td.append(tools.formatDate(info.lastupdate));
    tr.append(td);

    //操作的部分
    td = document.createElement('td');
    //修改按钮
    let btn01 = document.createElement('button');
    btn01.append('修改');
    btn01.classList.add('btn', 'btn-primary', 'btn-sm');
    btn01.addEventListener('click', () => {
      showModify(info);
    });
    td.append(btn01);

    //删除按钮
    let btn02 = document.createElement('button');
    btn02.append('删除');
    btn02.classList.add('btn', 'btn-danger', 'btn-sm', 'ms-1');
    btn02.addEventListener('click', () => {
      showDelete(info);
    });
    td.append(btn02);

    tr.append(td);

    tbdata.append(tr);
  }
}

//分页相关的部分 =====================
//获取到所有的分页a标记
//a.page-link表示必须是a标记且带有page-link的class
//querySelectorAll表示获取对应css选择器的所有元素
let elepages = document.querySelectorAll('a.page-link');
console.log('分页相关的a标记', elepages);

function showPage() {
  elepages[1].innerHTML = `
当前页/总页数/记录数: 
${page.pageNumber}/${page.pageCount}/${page.total}
`;
}
//下一页
elepages[2].addEventListener('click', () => {
  page.pageNumber++;
  if (page.pageNumber > page.pageCount) {
    page.pageNumber = page.pageCount;
    return;
  }
  query();
});

//上一页
elepages[0].addEventListener('click', () => {
  page.pageNumber--;
  if (page.pageNumber < 1) {
    page.pageNumber = 1;
    return;
  }
  query();
});

query();

//#endregion

//#region 修改的部分
let modifyInfo;
let modifyDialog = document.getElementById('modifyDialog');
let txt_mtitle = document.getElementById('txt_mtitle');
let txt_minfo = document.getElementById('txt_minfo');
let btnModify = document.getElementById('btnModify');

let mdialog = new bootstrap.Modal(modifyDialog);

function showModify(info) {
  console.log('修改的信息', info);
  modifyInfo = info;
  txt_mtitle.value = info.title;
  txt_minfo.value = info.info;

  mdialog.show();
}

btnModify.addEventListener('click', () => {
  modifyInfo.title = txt_mtitle.value;
  modifyInfo.info = txt_minfo.value;

  ajax.post('/user/note/update', modifyInfo, (data) => {
    showToast(data.message);
  });
});

//#endregion

//#region 删除的部分
let delInfo;
let delDialog = document.getElementById('delDialog');
let btnDel = document.getElementById('btnDel');
let delbody = document.querySelector('#delDialog .modal-body');

let ddialog = new bootstrap.Modal(delDialog);

function showDelete(info) {
  console.log('删除的信息', info);
  delInfo = info;
  delbody.innerHTML = `确定删除：${info.title}的信息？`;
  ddialog.show();
}
btnDel.addEventListener('click', () => {
  ajax.post('/user/note/delete', { unid: delInfo.unid }, (data) => {
    showToast(data.message);
    ddialog.hide();
  });
});
//#endregion

//#region 关闭重查
let addDialog = document.getElementById('addDialog');
addDialog.addEventListener('hidden.bs.modal', query);
modifyDialog.addEventListener('hidden.bs.modal', query);
delDialog.addEventListener('hidden.bs.modal', query);
//#endregion

// 作业：同步按照上课的进度完成用户联系人的功能
